<template>
  <div class="btm-item-info">
    <t-image
      :style="{
        height: props.type === 1 ? '186px' : '442px',
      }"
      fit="cover"
      position="center"
      class="btm-item-info-img t-image--fit-contain t-image--position-center"
      :src="$filters.getLinkUrl(props.info.coverUrl, '?format/webp')"
      alt=""
    >
      <template #error>
        <imageNull />
      </template>
    </t-image>
    <div
      class="btm-box"
      :style="{
        background: colorList5[store.styleInfo.colorType - 1].themeColor,
      }"
    >
      <span :style="{ fontFamily: store.styleInfo.fontFamily }">{{ props.info.name }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import imageNull from '@/components/imageNull/index.vue';
import { colorList5 } from '../../../data';
import { useProjectStore } from '@/store';

const store = useProjectStore();
const props = defineProps({
  info: {
    type: Object,
  },
  type: {
    type: Number,
    default: 1,
  },
});
</script>

<style lang="less" scoped>
.btm-item-info {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin-top: 20px;
}
.btm-box {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  height: 50px;
  span {
    font-size: 18px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    color: #ffffff;
    line-height: 28px;
    color: #fff;
    text-align: center;
    width: 100%;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 溢出隐藏 */
    text-overflow: ellipsis; /* 添加省略号 */
  }
}
</style>
